<template>
  <div class="hc-login">
    <h1 class="title">登录</h1>
    <p class="text">专注企业服务软件定制</p>
  </div>

  <div style="margin-top: 50px">
    <el-form ref="formRef" :rules="rules" :label-position="labelPosition" :model="formLabelAlign" :size="size"
      style="width: 500px">
      <el-form-item label="用户名" prop="username">
        <el-input :prefix-icon="User" v-model="formLabelAlign.username" placeholder="请输入用户信息" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input :prefix-icon="Lock" placeholder="请输入密码" type="password" autocomplete="off"
          v-model="formLabelAlign.password" />
      </el-form-item>
    </el-form>
    <div class="flex a-l-c j-s-b">
      <el-checkbox v-model="checked1" label="记住我" />
      <span class="ore" @click="emit('forpsd')">忘记密码？</span>
    </div>
    <div class="btn">
      <el-button class="btn_t" :loading="state.loading" @click="subimt($refs.formRef)" type="primary">登录</el-button>
    </div>
    <div class="txt" @click="emit('forget')">还没帐号？点击去注册</div>
  </div>
</template>

<script setup>
import { reactive, ref, defineEmits } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { login } from '@/api/user.js';
import { getList } from '@/api/menu.js';
import { userInfo } from "@/stores/modules/user.js";
import { useStore } from "@/stores/modules/router.js";
const routerInfo = useStore();
const { getAllRouter } = routerInfo;
const userData = userInfo();
const { getUset } = userData;
const router = useRouter();

const emit = defineEmits(["forget", "forpsd"]);
const labelPosition = ref("top");
const size = ref("large");
const checked1 = ref(true);
const state = reactive({
  loading: false,
});

const rules = reactive({
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
});

const formLabelAlign = reactive({
  username: "admin",
  password: "123456",
});

const subimt = async (formEl) => {
  if (!formEl) return;

  await formEl.validate(async (valid) => {
    if (valid) {
      state.loading = true;

      try {
        const res = await login(formLabelAlign);
        // console.log('登录结果:', res);

        if (res.code === 200) {
          // 保存用户信息
          getUset(res.data);
          getMenuList()
          // 跳转到首页
          // router.push("/home");

          ElMessage.success('登录成功');
        } else {
          ElMessage.error(res.msg || '登录失败');
        }
      } catch (error) {
        console.error('登录错误:', error);
        ElMessage.error('登录失败，请重试');
      } finally {
        state.loading = false;
      }
    } else {
      ElMessage.warning('请填写完整的登录信息');
    }
  });
};
const getMenuList = (data) => {
  getList({}).then(res => {
    console.log('获取菜单', res)
    getAllRouter(res.data);
    router.push("/home");
  })
}
</script>

<style lang="less" scoped>
.ore {
  font-size: 14px;
  cursor: pointer;
  color: #1e6aed;
}

.title {
  color: #1a1a1a;
  margin-bottom: 5px;
}

.text {
  color: #999999;
  font-size: 16px;
}

/deep/.el-form-item__label {
  font-size: 16px;
  color: #1a1a1a;
}

.btn {
  width: 100%;
  margin-top: 60px;
}

.btn_t {
  height: 50px;
  width: 100%;
  background-color: #1e6aed;
  font-size: 16px;
}

.txt {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
  cursor: pointer;
  color: #1e6aed;
}
</style>
